<template>
  <div class="analysis-container">
    <!-- 标题区域 -->
    <div class="header">
      <div class="ai-icon">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" stroke="#fff" stroke-width="2" />
          <path d="M12 8V12L15 15" stroke="#fff" stroke-width="2" stroke-linecap="round" />
        </svg>
      </div>
      <h1>AI正在深度分析中</h1>
      <p>基于您的信息和问卷回答，正在生成专业洞察报告</p>
    </div>

    <!-- AI计算进度 -->
    <div class="progress-section">
      <div class="progress-label">
        <span class="icon">⚡</span>
        <span>AI计算进度</span>
      </div>
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: progress + '%' }"></div>
      </div>
      <div class="progress-percent">{{ progress }}%</div>
    </div>

    <!-- 步骤列表 -->
    <div class="steps-list">
      <div v-for="(step, index) in steps" :key="index" class="step-item">
        <div class="step-status" :class="{ completed: step.completed }">
          <span v-if="step.completed" class="check-icon">✓</span>
          <span v-else class="loading-icon">...</span>
        </div>
        <div class="step-content">
          <div class="step-title">{{ step.title }}</div>
          <div class="step-desc">{{ step.desc }}</div>
        </div>
      </div>
    </div>

    <!-- 实时数据分析 -->
    <div class="realtime-data">
      <div class="data-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 19H5C3.89543 19 3 18.1046 3 17V7C3 5.89543 3.89543 5 5 5H9M9 19H15C16.1046 19 17 18.1046 17 17V7C17 5.89543 16.1046 5 15 5H9M9 19V15H15V19M9 11H15M9 7H15" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="data-text">
        <div class="data-title">实时数据分析</div>
        <div class="data-subtitle">正在分析来自 111 的 111 职位数据...</div>
      </div>
      <div class="data-count">
        <span class="count">{{ dataCount }}</span>
        <span class="unit">数据样本</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 步骤数据
const steps = [
  { title: '正在扫描全网数据池...', desc: '扫描超过100万+职位数据', completed: false },
  { title: '正在匹配相似背景样本...', desc: '匹配50,000+相似背景用户', completed: false },
  { title: '分析行业薪资趋势...', desc: '分析最新薪资市场动态', completed: false },
  { title: '评估职业发展路径...', desc: '构建个性化发展轨迹', completed: false },
  { title: '生成专业洞察报告...', desc: '生成AI驱动的深度报告', completed: false }
];

// 进度控制
const progress = ref(0);
const dataCount = ref(0);

// 模拟进度动画
onMounted(() => {
  let i = 0;
  const interval = setInterval(() => {
    if (i >= 101) {
      clearInterval(interval);
      return;
    }

    // 每次增加 1%
    progress.value = i;

    // 每 10% 完成一个步骤
    if (i % 20 === 0 && i >= 0) {
      const stepIndex = Math.floor(i / 20);
      if (stepIndex < steps.length) {
        steps[stepIndex].completed = true;
      }
    }

    // 数据样本递增
    dataCount.value = Math.floor(Math.random() * 1000000) + 1000000;

    i++;
  }, 50); // 每 50ms 增加一次
});
</script>

<style scoped>
.analysis-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f2027, #303c4a, #2c5364);
  color: white;
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.ai-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.header h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  color: #e0f7ff;
}

.header p {
  color: #b3d9ff;
  font-size: 14px;
  margin: 8px 0;
}

/* 进度条 */
.progress-section {
  width: 100%;
  max-width: 500px;
  margin-bottom: 30px;
  text-align: center;
}

.progress-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #b3d9ff;
  margin-bottom: 8px;
}

.progress-bar {
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border-radius: 4px;
  transition: width 0.1s ease;
}

.progress-percent {
  font-size: 16px;
  color: #e0f7ff;
  font-weight: 500;
  margin-top: 8px;
}

/* 步骤列表 */
.steps-list {
  width: 100%;
  max-width: 500px;
  margin-bottom: 30px;
}

.step-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.step-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.step-status {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.step-status.completed {
  background: #4caf50;
  border: 2px solid #4caf50;
}

.check-icon {
  color: white;
  font-size: 16px;
}

.loading-icon {
  color: #b3d9ff;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 16px;
  color: #e0f7ff;
  margin: 0;
}

.step-desc {
  font-size: 12px;
  color: #b3d9ff;
  margin: 4px 0 0;
}

/* 实时数据 */
.realtime-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border-left: 4px solid #00f2fe;
}

.data-icon {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.data-text {
  flex: 1;
}

.data-title {
  font-size: 14px;
  color: #e0f7ff;
  margin: 0;
}

.data-subtitle {
  font-size: 12px;
  color: #b3d9ff;
  margin: 4px 0 0;
}

.data-count {
  text-align: right;
}

.count {
  font-size: 18px;
  font-weight: bold;
  color: #00f2fe;
}

.unit {
  font-size: 12px;
  color: #b3d9ff;
}
</style>